<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
</head>
<body>
<script src="js/vue.js"></script>

<script src="element-ui/lib/index.js"></script>
<!--css样式-->
<link href="element-ui/lib/theme-chalk/index.css" rel="stylesheet">

<script src="js/axios-0.18.0.js"></script>
<div id="app">
    <!--    搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand1.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand1.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand1.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
        </el-form-item>
    </el-form>
    <!--    批量删除和新增-->
    <el-row>
        <el-button type="danger" plain>
            <i class="el-icon-delete" @click="open"> 批量删除</i>
        </el-button>
        <el-button type="primary" plain @click="dialogVisible = true">
            <i class="el-icon-circle-plus"> 新增</i>
        </el-button>
    </el-row>
    <!--添加数据按钮信息-->
    <el-dialog
            title="添加品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称" prop="brandName">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch
                        v-model="brand.status"
                        active-value="1"
                        inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button :plain="true" type="primary" @click="addTable">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--        表格-->
    <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                align="center">
        </el-table-column>
        <el-table-column
                type="index"
                label="序号"
                align="center">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="品牌名称"
                align="center">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="企业名称"
                align="center">
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                align="center">
        </el-table-column>
        <el-table-column
                prop="status1"
                label="当前状态"
                align="center">
        </el-table-column>
        <el-table-column
                label="操作" align="center">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="primary" @click="editData(scope.row)">
                        <i class="el-icon-edit"> 修改</i>
                    </el-button>
                    <el-button type="danger" @click="openDelete(scope.row)">
                        <i class="el-icon-delete"> 删除</i>
                    </el-button>
                </el-row>
                <!--                修改面板-->
                <!-- 修改弹窗 -->
                <el-dialog
                        title="修改品牌信息"
                        :visible.sync="dialogVisible"
                        width="30%">
                    <el-form
                            ref="editForm"
                            :model="form"
                            label-width="100px"
                            label-position="right">

                        <el-form-item label="品牌名称" prop="brandName">
                            <el-input v-model="form.brandName" clearable/>
                        </el-form-item>

                        <el-form-item label="企业名称" prop="companyName">
                            <el-input v-model="form.companyName" clearable/>
                        </el-form-item>

                        <el-form-item label="排序" prop="ordered">
                            <el-input-number
                                    v-model="form.ordered"
                                    :min="1"
                                    controls-position="right"/>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="描述" prop="description">
                            <el-input
                                    type="textarea"
                                    v-model="form.description"
                                    :rows="3"/>
                        </el-form-item>
                    </el-form>

                    <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
                </el-dialog>
            </template>
        </el-table-column>
    </el-table>
    <teleport>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30, 40]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </teleport>
</div>
<script>
    new Vue({
        el: "#app",
        //加载完成时，发送异步请求，获取数据
        mounted() {
            this.selectAll();
        },
        data() {
            return {
                //总记录数
                totalCount:"",
                //默认当前页码
                currentPage4: 1,
                //每一页显示条数
                pageSize:5,
                // 复选框选中集合
                multipleSelection: [],

                // 被选中的id数组
                selectedIds: [],

                dialogVisible: false,

                // 搜索表单数据
                brand1: {
                    status: this.value,
                    companyName: '',
                    brandName: '',
                },
                //添加表单数据
                brand: {
                    id: '',
                    status: this.value,
                    companyName: '',
                    brandName: '',
                    ordered: '',
                    description: '',
                },
                //表格数据
                tableData: {},
                //修改数据
                daologFormVisible: false,
                form: {
                    id: '',
                    status: this.value,
                    companyName: '',
                    brandName: '',
                    ordered: '',
                    description: '',
                },
                tableEditData: {}
            }
        },
        methods: {
            //查询所有数据
            selectAll() {
               /*
               查询所有
               //this生命周期
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/brand-case-app/brand/selectAll"
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    // console.log(_this.tableData)
                })*/
                //分页查询
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case-app/brand/selectByPageAndCondition?currentPage="+this.currentPage4+"&pageSize="+this.pageSize,
                    data:this.brand1
                }).then(resp =>{
                    this.tableData = resp.data.rows;//{rows[],totalCount:100}
                    this.totalCount = resp.data.totalCount;
                    // console.log(_this.tableData)
                })
            },
            addTable() {
                console.log(this.brand);
                //发送ajax请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case-app/brand/add",
                    data: this.brand
                }).then(resp =>{
                    if (resp.data == "success") {
                        //添加成功

                        //关闭窗口
                        this.dialogVisible = false

                        //重新查询数据
                        this.selectAll();
                        //成功标识
                        this.$message({
                            message: '添加成功！！',
                            type: 'success'
                        });
                    }
                })
            },
            onSubmit() {
                // console.log(this.brand1);
                this.selectAll()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;

                //console.log(this.multipleSelection)
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                //重新设置值
                this.pageSize = val
                //刷新页面
                this.selectAll()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                //重新设置值
                this.currentPage4 = val
                //刷新页面
                this.selectAll()

            },
            //批量删除数据
            deleteByIds() {
                console.log(this.multipleSelection)
                /*
                * [
                    {
                        "brandName": "华为",
                        "companyName": "华为技术有限公司",
                        "description": "万物互联",
                        "ordered": 100,
                        "status": 1,
                        "status1": "启用"
                    },
                    {
                        "brandName": "小米",
                        "companyName": "小米科技有限公司",
                        "description": "are you ok",
                        "ordered": 50,
                        "status": 1,
                        "status1": "启用"
                    },
                    {
                        "brandName": "格力",
                        "companyName": "格力电器股份有限公司",
                        "description": "让世界爱上中国造",
                        "ordered": 30,
                        "status": 1,
                        "status1": "启用"
                    }
               ]*/
                //1、创建id数组[1,2,3],从 this.multipleSelection获取id
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement = this.multipleSelection[i];
                    //给自己创建的selectedIds[]数组赋值
                    this.selectedIds[i] = selectionElement.id;
                    console.log("查询" + selectionElement.id)
                }
                //2、发送ajax请求,删除数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case-app/brand/deleteByIds",
                    data: this.selectedIds
                }).then(resp=> {
                    if (resp.data == "success") {
                        //删除成功
                        //重新查询数据
                        this.selectAll();
                        //成功标识
                        this.$message({
                            message: '删除成功！！',
                            type: 'success'
                        });
                    }
                })
            },
            //提示信息
            open() {
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteByIds()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除数据
            deleteData(row) {
                axios({
                    method: "post",
                    url: `http://localhost:8080/brand-case-app/brand/deleteById`,
                    data: row.id
                }).then(resp=>{
                    if (resp.data == "success") {
                        //删除成功
                        //重新查询数据
                        this.selectAll();
                        //成功标识
                        this.$message({
                            message: '删除成功！！',
                            type: 'success'
                        });
                    }
                })
            },
            openDelete(row) {
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteData(row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editData(row) {
                //this生命周期
                this.editStatus = true,
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case-app/brand/editData",
                        data: row.id
                    }).then(resp=>{
                        this.tableEditData = resp.data;
                        // 将返回的数据赋值给表单对象
                    })
            },
        }
    })
</script>
</body>
</html>